<!DOCTYPE HTML>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>Powerful JQuery Plugins</title>
    <link href="/js/jQueryUI/jquery-ui.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jsTree/themes/default/style.css" type="text/css" rel="stylesheet"></link>
    <style type="text/css">
    	* {
    		margin: 0;
    		padding: 0;
    	}
    	body {
    		border: 1px solid black;
    	}
    	.west_region {
        	width: 39%;
        	height: 650px;
        	float: left;
        }
    	.center_region {
        	width: 59%;
        	height: 650px;
        	border: 1px solid green;
        	float: right;
        }
        .container {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .login-form {
        	width: 500px;
        	height: 150px;
        	margin-top: 10px;
        	margin-left: 5px;
        	padding: 45px;
        	border: 1px solid purple;
        }
        .login-form span.msg {
       		width: 150px;
       		height: 20px;
       		color: red;
       		display: block;
       		visibility: hidden;
        }
        .login-form p {
        	width: 200px;
        	height: 45px;
        	margin-top: 15px;
        }
        .login-form label {
        	display: inline-block;
        	width: 80px;
        }
        .login-form input {
        	width: 200px;
        }
    </style>
  </head>
  
  <body>
  	<div class="west_region">
	  	<div class="container">
	    	<div id="tree_demo"></div>
	    </div>
    </div>
    <div class="center_region">
   		<form class="login-form">
   			<span class="msg"></span>
   			<p>
   				<label for="username">用户名：</label>
   				<input id="username" name="username" type="text" maxlength="15" required="required">
   			</p>
   			<p>
   				<label for="password">密码：</label>
   				<input id="password" name="password" type="password" maxlength="10" required="required">
   			</p>
   			<p class="login-btn">
   				<input type="button" value="登陆">
   			</p>
   		</form>
   	</div>
    <script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="/js/jQueryUI/jquery-ui.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/jquery.validate.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/messages_zh.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryScrollbar/perfect-scrollbar.jquery.js" type="text/javascript"></script>
    <script src="/js/jsTree/jstree.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
        	$(".login-form input[type='text']").focus();
        	$("#tree_demo")
        	   .jstree({
        		   "core": {
        			   "data": {
        				   "url": "/demo/dept.json",
        			   }
        		   },
        		   "checkbox": {
        			   "keep_selected_style": false
        		   },
        		   "plugins": ["checkbox"]
        	   })
        	   .on("changed.jstree", function(e, data) {
        		   console.log(data.selected);
        	   });
        	$(".container").perfectScrollbar();
        	$(".login-form").validate();
        	$(".login-btn input[type='button']").click(function() {
        		if ($(".login-form").valid()) {
        			$.post("/test/form", $(".login-form").serialize())
        				.done(function(result) {
        					$(".msg").css("visibility", "visible").text(result);
        				})
        				.fail(function(result) {
        					console.log("失败");
        				});
        		}
        	});
        });
    </script>
  </body>
</html>